<template>
  <div class="common-layout">
    <el-container class="home-container">
      <!--头部区域-->
      <el-header class="home-header">
        <div class="title">
          <el-icon style="margin-left: 10px">
            <MoonNight />
          </el-icon>
          <span> 东软颐养中心 </span>
        </div>
        <div>
          <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false"
            @select="handleCommand">
            <div class="flex-grow" />
            <el-menu-item index="/userhome/usermain">系统首页</el-menu-item>
            <el-menu-item index="/userhome/usercheckin">
              住宿信息登记
            </el-menu-item>
            <template v-if="ustate == 1">
              <el-sub-menu index="2">
                <template #title>活动记录</template>
                <el-menu-item index="/userhome/goingout" disabled>外出登记</el-menu-item>
                <el-menu-item index="/userhome/uservisit" disabled>探望登记</el-menu-item>
              </el-sub-menu>
              <el-menu-item index="/userhome/userhealth" disabled>
                健康信息
              </el-menu-item>
              <el-menu-item index="/userhome/usernursing" disabled>
                护理信息
              </el-menu-item>
            </template>
            <template v-else>
              <el-sub-menu index="2">
                <template #title>活动记录</template>
                <el-menu-item index="/userhome/goingout">外出登记</el-menu-item>
                <el-menu-item index="/userhome/uservisit">探望登记</el-menu-item>
              </el-sub-menu>
              <el-menu-item index="/userhome/userhealth">
                健康信息
              </el-menu-item>
              <el-menu-item index="/userhome/usernursing">
                护理信息
              </el-menu-item>
            </template>
          </el-menu>
        </div>
        <div>
          <el-dropdown class="el-dropdown-link" @command="handleCommand">
            <span>
              <el-icon :size="30">
                <Avatar />
              </el-icon>
              <el-icon>
                <arrow-down class="el-icon--right" />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <template v-if="ustate == 1">
                  <el-dropdown-item command="/userhome/userpersoncenter" disabled>
                    个人中心
                  </el-dropdown-item>
                </template>
                <template v-else>
                  <el-dropdown-item command="/userhome/userpersoncenter">
                    个人中心
                  </el-dropdown-item>
                </template>
                <el-dropdown-item command="/login">退出</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <div>用户</div>
        </div>
      </el-header>

      <el-main class="home-main">
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from "vue-router";
import { computed } from 'vue';
import { useStore } from 'vuex';
import * as user from '@/api/user.js';

const ustate = ref(1);
const activeIndex = ref("1");
const router = useRouter();
const store = useStore();
const handleCommand = (command) => {
  if (command == '/login') {
    store.commit("clearAccount");
  }
  router.push(command);
};
const getUsername = computed(() => store.getters.getUsername);
const getState = () => {
  const params = reactive({
    userName: getUsername
  })
  user.stateAPI(params).then((resp) => {
    if (resp.data.code !== 2000) {
      ElMessage({
        type: 'error',
        message: resp.data.message,
      })
      return
    }
    ustate.value = resp.data.data.eldState;
  });
}
// 生命周期钩子
onMounted(() => {
  getState();
})
</script>
<style lang="less" scoped>
.home-container {
  height: 100vh;
}

.home-header {
  background-color: #578bba;
  display: flex;
  justify-content: space-between;
  padding-left: 0%;
  align-items: center;
  color: #ffffff;
  font-size: 20px;
  letter-spacing: 3px;
  font-size: 30px;
  font-weight: bold;

  >div {
    display: flex;
    align-items: center;

    span {
      margin-left: 15px;
    }

    img {
      width: 50px;
      height: 50px;
      margin-left: 20px;
    }
  }

  .el-menu-demo {
    background-color: #578bba;
  }
}

.home-aside {
  width: 250px;
}

.home-main {
  background-color: #e9e9e9;
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-dropdown-link {
  cursor: pointer;
  color: white;
  display: flex;
  align-items: center;
}
</style>
